<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery.min.js"></script>
		<style>
			.disabled{
				cursor: not-allowed;
				background-color: red;
				border: none;
				color: #fff;
				outline: none;
			}
			button{
				outline:none;
			}
			b{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<span class="price">单价：<b>100.00</b></span>
			<button class="reduce">-</button>
			<input type="text" id="ipt" value="1" />
			<button class="add">+</button>
			<span class="total">总价：<b>100.00</b></span>
		</div>
		<div>
			<span class="price">单价：<b>200.02</b></span>
			<button class="reduce">-</button>
			<input type="text" id="ipt" value="2" />
			<button class="add">+</button>
			<span class="total">总价：<b>100.10</b></span>
		</div>
		<div>
			<span class="price">单价：<b>240.00</b></span>
			<button class="reduce">-</button>
			<input type="text" id="ipt" value="3" />
			<button class="add">+</button>
			<span class="total">总价：<b>100.00</b></span>
		</div>
		<p>总价：<b></b></p>
	</body>
	<script type="text/javascript">
		var allTot = 0;
		// 第一次的方法计算每行的价格
		function getRowTot(){
			$("div").each(function(i,v){
				var price = $(v).find(".price b").html();
				var num = $(v).find("#ipt").val();
				var tot = parseFloat(price)*num;
				tot = tot.toFixed(2);
				tot = parseFloat(tot)
				$(v).find(".total b").html(tot)
				 allTot += tot;
				 $("p b").html(allTot);
			})
		}
		getRowTot();



		// 减法
		$(".reduce").click(function(){
			var price = $(this).siblings(".price").find("b").html();
			price = parseFloat(price);
			var num = parseInt( $(this).next().val() );
			if(num<=1){
				num = 1;
				$(this).addClass("disabled")
			}else{
				num--;
				$(".add").removeClass("disabled")
			}
			$(this).next().val(num) 
			var tot = num * price
			$(this).siblings(".total").find("b").html( tot.toFixed(2)   )
			getRowTot();
		})
		// 加法
		$(".add").click(function(){
			var price = $(this).siblings(".price").find("b").html();
			price = parseFloat(price);
			var num = parseInt( $(this).prev().val() );
			if(num<10){
				num++;
				if(num>1){
					$(".reduce").removeClass("disabled")
				}
			}else{
				num =10;
				$(this).addClass("disabled")
			}
			 $(this).prev().val(num) 
			 var tot = num * price
			 $(this).siblings(".total").find("b").html( tot.toFixed(2)   )
			getRowTot();
		})
		
	</script>
</html>
